<template>
  <div class="box">
    <header>
      <van-search v-model="value" show-action placeholder="请输入搜索关键词" @click='$router.push("/search")'>
        <template #left>
          <van-icon name="arrow-left" size='16' @click='$router.back()' />
        </template>
        <template #action>
          <van-button type="danger" size="small" @click="onSearch">搜索</van-button>
        </template>
      </van-search>
    </header>
    <div class="main">
      <div class="tuijian">
        <h4>热门搜索</h4>
        <van-grid :gutter="4">
          <van-grid-item v-for="(item, index) in doHotWord" :key="index" @click="searchs(index)">{{ item.keyword
          }}</van-grid-item>
        </van-grid>
      </div>

      <div class="top10">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onSearch">

          <ul class="prolist2">
            <li v-for="(item, index) in dosearch" :key="index" @click='jumpTo(item.proid, index)'
              :class="indexs == index ? 'active' : ''">
              <img width="100%" :src="item.img1">
              <div>
                <h4>{{ item.proname }}</h4>
                <p>￥<span>{{ item.originprice }}</span></p>
              </div>
            </li>
          </ul>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { doSearch, doHotWord } from "../api/search";
import Vue from 'vue';
import { Icon, Grid, GridItem } from 'vant';

Vue.use(Icon);
Vue.use(Grid);
Vue.use(GridItem);

export default {
  data() {
    return {
      value: '',
      isShow: true,
      indexs: 0,
      doHotWord: [],
      loading: false,
      finished: false,
      dosearch: [],
      count: 1
    }
  },
  methods: {
    jumpTo(proid) {
      this.$router.push('/detail/' + proid)
    },

    onSearch() {
      this.loading = true
      setTimeout(() => {
        //  实现 -- 长度不等于0 ??
        doSearch({ count: 1, limiNum: 3, keyword: this.value }).then((res) => {
          this.loading = false
          console.log(res.data.data);
          this.dosearch = res.data.data

          if (res.data.data.length == 0) {
            this.finished = true
          } else {
            this.dosearch = [...this.dosearch, ...res.data.data]
            this.count++
          }
        });
      }, 1000);
    },

    searchs(index) {
      doSearch({ count: 1, limiNum: 3, keyword: this.doHotWord[index].keyword }).then(res => {
        console.log(res);
        this.dosearch = res.data.data
      })
    },
  },

  created() {
    doHotWord().then(res => {
      // console.log(res);
      this.doHotWord = res.data.data
    })
  }

}
</script>

<style scoped>

.main p {
  margin: .1rem 0;
}

.top10 {
  margin-top: 0.1rem;
  min-height: 0.2rem;
  background-color: #fff;
}

.top10 ul li div h4 {
  font-weight: 400;
}

.top10 ul li div p {
  color: red;
}

.prolist2 li div {
  padding-left: 10px;
}

.prolist2 li {
  display: flex;
}

.prolist2 li img {
  width: 30%;
  height: 0.8rem;
}

.prolist2 li div {
  flex: 1;
}
</style>